<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
        status-icon>
        <el-form-item label="用户名" prop="account">
            <el-input v-model="ruleForm.account" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="cfpassword">
            <el-input v-model="ruleForm.cfpassword" />
        </el-form-item>、
        <el-form-item label="">
            <el-button type="primary" @click="register(ruleFormRef)">注册</el-button>
        </el-form-item>
    </el-form>
</template>
  
<script setup>
import { ref } from 'vue'


const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = ref({
    account: '',
    password: '',
    cfpassword: '',
})

const rules = ref({
    account: [
        { required: true, message: '请输入你的用户名', trigger: 'blur' },
        { pattern: /^[a-zA-Z]{6,10}$/, message: '用户名由英文字母组成，长度为6~10个字符', trigger: ['change', 'blur'] }
    ],
    password: [
        { required: true, min: 6, message: '请输入至少6个字符的密码', trigger: ['change', 'blur'] },
    ],
    cfpassword: [
        { required: true, message: '请输入至少6个字符的密码', trigger: ['change', 'blur'] },
        {
            validator: (rule, value, callback) => {
                console.log('rule', rule);
                console.log('value', value);
                if (value === ruleForm.value.password) {
                    callback()
                } else {
                    callback(new Error('两次密码输入不一致'))
                }
            }
        },
    ],

})

const register = (formEl) => {
    console.log(formEl);
    if (formEl) {
        formEl.validate((valid) =>{
            console.log('valid',valid);
            if(valid) {
                // 发起注册接口请求
            }
        })
    }

}

</script>